import {
  createRouter,
  // createWebHashHistory, // hash
  createWebHistory, // history
} from "vue-router";

// import Home from "../views/Home/index.vue";
// import About from "../views/About/index.vue";
// import Detail from "../views/Detail/index.vue";
// 路由懒加载
const Home = () => {
  return import("../views/Home/index.vue");
};
const About = () => import("../views/About/index.vue");
const Detail = () => import("../views/Detail/index.vue");

export default createRouter({
  history: createWebHistory(), // 路由模式
  routes: [
    // 路由配置
    {
      path: "/home", // 路由路径
      component: Home, // 路由组件
      name: "Home", // 命名路由
      meta: {
        title: "Home",
      }, // 路由参数
      children: [
        // 子路由
        {
          // path: "/home/detail/:id",
          path: "detail/:id", // 简写，不写 / ，就会自动补全父路由路径
          component: Detail,
          name: "Detail",
        },
      ],
    },
    {
      path: "/about", // 路由路径
      component: About, // 路由组件
      meta: {
        title: "About",
      },
      name: "About",
    },
    {
      // path: "*", // vue2
      // https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1
      path: "/:pathMatch(.*)*", // vue3 匹配任意地址
      redirect: "/home",
    },
  ],
  // scrollBehavior() {} // 滚动行为
});
